<template>
        <div class="container-bg">
         <!-- <div class="header-bg">
         </div> -->
        <div calss="container">
        <div class="login-logo-bg">
        </div>
        <div class="login-container">
            <div class="login-container-header">BI经营管理数字化平台</div>
            <!-- <img @click="toPath" class="close-btn" src="https://oss.jtmckj.com/Room/biclose.svg" alt=""> -->
            <div class="login-text-flex">
                  <img class="login-img" src="https://oss.jtmckj.com/Room/bilogin-text.png" alt="">
                  <div class="text">数据驱动决策·实时监控预警</div>
              </div>
            <div class="cm-account-form">
                

                <van-field style="border-radius: 8px;" class="cm-vant-cell" v-model="postForm.username" type="text" name="accout" :left-icon="v_login_account" placeholder="请输入账号" autocomplete="off" />

                <van-field 
                    style="border-radius: 8px;"
                    class="cm-vant-cell" 
                    v-model="postForm.password" 
                    :type="passwordVisible ? 'password': 'text'" 
                    name="password"
                    :left-icon="v_login_password" 
                    placeholder="请输入密码" 
                    autocomplete="new-password" 
                    :right-icon="passwordVisible?i_password_hide:i_password_show" 
                    @click-right-icon="passwordVisible=!passwordVisible"
                ></van-field>

                <div class="cm-vant-checkbox">
                    <!-- <div class="changPass" @click="changPass">修改密码</div> -->
                    <van-checkbox v-model="checked" shape="square" icon-size="16" >
                        <template #icon>
                            <img class="cm-vant-checkbox__icon" :src="checked ? i_checkbox_checked : i_checkbox_check" />
                        </template>
                        记住密码
                    </van-checkbox>
                    
                </div>

                <z-button-group top="30" style="padding-bottom: 40px;">
                    <z-button style="border-radius:32px;background:#4e91d5;color: #FEFEFE;" bold :disabled="isAllValuesPresent" @click="onSubmit">登录</z-button>
                </z-button-group>
                 
                <div class="footer-text-poa">
                    <div class="cm-public-footer">
                癸卯兔科技发展集团 
               </div> 
                <div class="cm-public-footer"> 
                    极兔妙创网络科技 技术支持
                </div>
                <div class="cm-public-footer">
                    闽ICP备2024034795号
                </div>
                </div>
            </div>
        </div>
        </div>
        </div>
</template>
<script setup>
import { showToast } from 'vant';
import useAppStore from '@/store/app'
import useConfigStore from '@/store/config'
import ls from '@/lib/ls'
import Api from '@/api'
import { validateMobile } from '@/lib/util.js'

// import i_logo from '@/assets/images/account/logo.png'
import i_logo_bg from '@/assets/images/account/logo-bg.png'
import i_logo from '@/assets/images/account/logo2.png'
import v_login_shop from '@/assets/svg/account/v_login_shop.svg'
import v_login_del from '@/assets/svg/account/v_login_del.svg'
// import v_login_account from '@/assets/svg/account/v_bilogin_account.svg'
// import v_login_password from '@/assets/svg/account/v_bilogin_password.svg'
import v_login_account from '@/assets/images/common/i_bi_user.png'
import v_login_password from '@/assets/images/common/i_bi_pass.png'
import i_password_hide from '@/assets/svg/account/i_bipassword_hide.svg'
import i_password_show from '@/assets/svg/account/i_bipassword_show.svg'
import i_checkbox_check from '@/assets/images/common/i_bicheckbox_checked.png'
import i_checkbox_checked from '@/assets/svg/account/i_bicheckbox_checked.svg'

const router = useRouter()
const appStore = useAppStore()
const checked = ref(false)

const postForm = reactive({
    username: '',
    password: '',
})

const onDel = function() {
    postForm.orgname = undefined
}

const passwordVisible = ref(true)

const isAllValuesPresent = computed(() => {
    return Object.values(postForm).some(v => v == undefined || v == null || v == '');
});

const changPass = ()=>{
    const configStore = useConfigStore()
    const form = ls.get('BILOGIN_FORM')||null
    ls.clear()
    if (form) {
        ls.set('BILOGIN_FORM', form)
    }
    configStore.isLoad.state = 0
    console.log(configStore.isLoad);
    router.push('/bichangePassword')
}

const onSubmit =  () => {
    if (unref(checked)) {
        ls.set('BILOGIN_FORM', postForm)
    }else {
        ls.remove('BILOGIN_FORM')
    }
    console.log(postForm);
    const userCode = postForm.username
    // return
      let url =  `https://bi.jtmckj.com/webroot/decision/login/cross/domain?validity=-1&fine_username=${postForm.username}&fine_password=${postForm.password}`;
 
      function jsonp(url, callback) {
        // 生成一个随机的回调函数名
        const callbackName = "jsonp_" + Math.round(100000 * Math.random());
        // 创建一个全局回调函数，名字为随机生成的回调函数名
        window[callbackName] = function (data) {
          callback(data); // 调用用户传入的回调函数
          document.body.removeChild(script); // 请求完成后删除 script 标签
          delete window[callbackName]; // 清理全局变量
        };
        // 构建 URL，添加回调函数名参数
        const script = document.createElement("script");
        script.src =
          url + (url.indexOf("?") === -1 ? "?" : "&") + "callback=" +  callbackName;
        // 将 script 标签添加到页面上开始加载
        document.body.appendChild(script);
      }
      jsonp(url, function (response) {
        console.log(response); // 处理返回的数据
        if (response.status == "success") {
        //   let openUrl = `https://bi.jtmckj.com/webroot/decision/view/form?viewlet=loginReport%252FBI%25E5%2586%25B3%25E7%25AD%2596%25E5%2588%2586%25E6%259E%2590%25E7%25B3%25BB%25E7%25BB%259F.frm&op=h5#/form?viewlet=%2FloginReport%2Fdirectory.frm&username=${userCode}&navigationID=1f4547eb3a63a0cd`;
          let openUrl = `https://bi.jtmckj.com/webroot/decision/view/form?viewlet=loginReport%252Fdirectory.frm&op=h5#/form`
        //   setTimeout(()=>window.open(openUrl))
          
          setTimeout(()=>window.location.href = openUrl)
        }else{
          showToast('用户不存在，或密码错误！')
        }
      });
};

const onInit = ()=>{
    const form = ls.get('BILOGIN_FORM')
    if (form) {
        Object.assign(postForm, form);
        checked.value = true
    }
}
onInit()


const toPath = () => {
router.push({
    path: `/workbench`,
})
}

</script>
<style scoped lang="scss">
.container {
            position: relative;
        }

.login-logo-bg {

      position: absolute;
      top: 0;
      &__cover {
          padding-top: 0px;
          height: 176px;
          width: 100%;
    }

    }

.login-container {
    height: 375px;
    background: url('https://oss.jtmckj.com/Room/bilogin-bg-spe.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .login-container-header{
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 18px;
        padding-top: 13px;
    }
    .close-btn {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 16px;
        height: 16px;
    }
    .login-logo {
        padding-top: 42px;

        &__cover {
            display: block;
            margin: auto;
            width: 90px;
            height: 56px;
        }
    }
    .login-title-one{
        font-family: Source Han Sans CN;

        font-weight: bold;
        font-size: 16px;
        color: #C3870E;
        line-height: 16px;
        text-align: top;
        // margin-top: 20px;
      //  padding-top: 20px;
    }
    .login-title-two{
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 16px;
        color: #67490E;;
        line-height: 16px;
        text-align: top;
        padding-top: 10px;
    }
}

.header-bg {
    height: 44px;
    // background: #17171A;
}
.container-bg {
    height: 100%;
    background: #ffffff;
    .login-text-flex {
        padding: 80px 0 44px 29.5px;
        display: flex;
        flex-direction: column;
        .text {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 13px;
            color: #ffffff;
            line-height: 15px;
            letter-spacing: 2px; /* 增加字间距 2 像素 */
        }
        .login-img {
            width: 193px;
            height: 25px;
            margin-bottom: 12px;
        }
    }
}
.cm-account-form {
    position: relative;
    margin-top: 50px;
    padding: 37px 32px 0 32px ;
    height: 100%;
    background: #ffffff;
    border-radius: 20px 20px 0 0 ;
    .footer-text-poa {
        // position: absolute;
        // bottom:200px ;
        // left: 0;
        // right: 0;
        padding-top: 30px;
        .cm-public-footer ,.cm-company-footer{
            color: #999999;
            font-size: 12px;
        }
    }
    .cm-vant-cell {
    background: #f2f2f2;
    border-radius: 20px;
    padding: 10px 20px;
    margin-top: 20px;

    &::after {
        transform: scaleY(0);
    }

    .van-field__left-icon {
        margin-right: 20px;
    }

    .van-icon__image {
        width: 20px;
        height: 20px;
    }

    ::v-deep{
        .van-field__control {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #212121 !important;
            line-height: 16px;
            -webkit-text-fill-color: #212121;

            &::placeholder {
                color: #999999;
                -webkit-text-fill-color: #999999;
            }
        }
    }

    &__label {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #212121;
        width: 81px;
        margin-right: 0;
    }
    }

    .cm-vant-checkbox {
        display: flex;
        justify-content: flex-end;
        padding-top: 16px;
        align-items: center;
        .changPass{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #00AAFF;
            line-height: 24px;
            text-decoration-line: underline;
            padding-right: 20px;
        }
        ::v-deep{
            .van-checkbox__label {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #212121;
                line-height: 14px;
            }
        }

        .cm-vant-checkbox__icon {
            width: 16px;
            height: 16px;
            display: block;
        }
    }

    .cm-cell {
        background: #ffffff;
        border-radius: 20px;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;

        &__label {}

        &-text {
            width: 100px;
            padding-left: 20px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #212121;
            line-height: 16px;
        }

        &-icon {
            display: block;
            width: 20px;
            height: 20px;
            margin: 0 20px;
        }

        &__value {
            flex: 1;
        }

        &-input {
            width: 100%;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #212121;
            line-height: 16px;
            display: block;
            -webkit-text-fill-color: #212121;

            &::placeholder {
                color: #999999;
                -webkit-text-fill-color: #999999;
            }
        }

        &__control {}

        &-btn {
            display: block;
            width: 18px;
            height: 18px;
            margin: 0 20px;
        }
    }
}

</style>
